<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>食光集 - 添加菜谱</title>
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 自定义配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF9AA2', // 可爱粉色
                        secondary: '#FFB7B2', // 浅粉色
                        accent: '#FFDAC1', // 橙色
                        light: '#E2F0CB', // 浅绿色
                        dark: '#B5EAD7', // 深绿色
                    },
                    fontFamily: {
                        sans: ['PingFang SC', 'Helvetica Neue', 'Arial', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style>
        /* 自定义样式 */
        .glass-effect {
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }
        .nav-tab {
            position: relative;
            transition: all 0.3s ease;
        }
        .nav-tab.active {
            color: #FF9AA2;
        }
        .nav-tab.active::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 3px;
            background-color: #FF9AA2;
            border-radius: 3px;
        }
        
        /* 表单样式 */
        .form-input {
            border: 1px solid rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }
        
        .form-input:focus {
            border-color: #FF9AA2;
            box-shadow: 0 0 0 2px rgba(255, 154, 162, 0.2);
        }
        
        /* 图片上传预览 */
        .image-preview {
            width: 100%;
            height: 160px;
            object-fit: cover;
            border-radius: 0.5rem;
        }
        
        /* 步骤列表样式 */
        .step-item {
            position: relative;
            padding-left: 2rem;
        }
        
        .step-number {
            position: absolute;
            left: 0;
            top: 0;
            width: 1.5rem;
            height: 1.5rem;
            background-color: #FF9AA2;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            font-weight: bold;
        }
        
        /* 分类样式 */
        .category-item {
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .category-item input[type="radio"] {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .category-item label {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 0.5rem;
            border-radius: 0.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
            background-color: rgba(255, 255, 255, 0.5);
            border: 1px solid rgba(0, 0, 0, 0.05);
        }
        
        .category-item input[type="radio"]:checked + label {
            background-color: #FF9AA2;
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 2px 4px rgba(255, 154, 162, 0.2);
        }
        
        .category-item input[type="radio"]:checked + label i {
            color: white;
        }
        
        .category-item label i {
            font-size: 1.25rem;
            margin-bottom: 0.25rem;
            color: #FF9AA2;
            transition: all 0.3s ease;
        }
        
        .category-item label span {
            font-size: 0.75rem;
            font-weight: 500;
        }
        
        /* 暂存提示样式 */
        .save-indicator {
            position: fixed;
            top: 4rem;
            right: 1rem;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 2rem;
            font-size: 0.875rem;
            z-index: 50;
            opacity: 0;
            transform: translateY(-10px);
            transition: all 0.3s ease;
        }
        
        .save-indicator.show {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
<body class="bg-gradient-to-b from-pink-50 to-white min-h-screen">
    <!-- 顶部导航栏 -->
    <nav class="fixed top-0 left-0 right-0 bg-white/80 backdrop-blur-md shadow-sm z-50">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <a href="discover.html" class="text-gray-600">
                <i class="fas fa-arrow-left"></i>
            </a>
            <h1 class="text-xl font-bold text-gray-800">添加菜谱</h1>
            <div class="flex items-center space-x-4">
                <button id="saveDraft" class="text-gray-600">
                    <i class="fas fa-save"></i>
                </button>
                <button id="submitRecipe" class="text-primary font-medium">发布</button>
            </div>
        </div>
    </nav>
    
    <!-- 暂存提示 -->
    <div id="saveIndicator" class="save-indicator">
        <i class="fas fa-check mr-2"></i>已暂存
    </div>

    <!-- 内容区域 -->
    <div class="container mx-auto px-4 pt-20 pb-24">
        <form id="recipeForm" class="space-y-4">
            <!-- 菜谱名称 -->
            <div>
                <label for="recipeName" class="block text-gray-700 font-medium mb-1">菜谱名称</label>
                <input type="text" id="recipeName" class="form-input w-full rounded-lg p-2" placeholder="给这道菜起个名字" required>
            </div>
            
            <!-- 菜谱图片 -->
            <div>
                <label class="block text-gray-700 font-medium mb-1">菜谱图片</label>
                <div class="glass-effect rounded-lg p-2 text-center">
                    <input type="file" id="recipeImage" accept="image/*" class="hidden" onchange="previewImage(this)">
                    <label for="recipeImage" class="cursor-pointer">
                        <div id="imagePreview" class="mb-2">
                            <img src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="预览图" class="image-preview">
                        </div>
                        <div class="text-primary text-sm">
                            <i class="fas fa-camera mr-1"></i>
                            <span>上传图片</span>
                        </div>
                    </label>
                </div>
            </div>
            
            <!-- 菜谱分类 -->
            <div>
                <label class="block text-gray-700 font-medium mb-1">菜谱分类</label>
                <div class="grid grid-cols-4 gap-2">
                    <div class="category-item">
                        <input type="radio" id="category-home" name="category" value="home">
                        <label for="category-home">
                            <i class="fas fa-utensils"></i>
                            <span>家常菜</span>
                        </label>
                    </div>
                    <div class="category-item">
                        <input type="radio" id="category-dessert" name="category" value="dessert">
                        <label for="category-dessert">
                            <i class="fas fa-cookie"></i>
                            <span>甜点</span>
                        </label>
                    </div>
                    <div class="category-item">
                        <input type="radio" id="category-meat" name="category" value="meat">
                        <label for="category-meat">
                            <i class="fas fa-drumstick-bite"></i>
                            <span>肉类</span>
                        </label>
                    </div>
                    <div class="category-item">
                        <input type="radio" id="category-vegetarian" name="category" value="vegetarian">
                        <label for="category-vegetarian">
                            <i class="fas fa-leaf"></i>
                            <span>素食</span>
                        </label>
                    </div>
                    <div class="category-item">
                        <input type="radio" id="category-seafood" name="category" value="seafood">
                        <label for="category-seafood">
                            <i class="fas fa-fish"></i>
                            <span>海鲜</span>
                        </label>
                    </div>
                    <div class="category-item">
                        <input type="radio" id="category-soup" name="category" value="soup">
                        <label for="category-soup">
                            <i class="fas fa-mug-hot"></i>
                            <span>汤羹</span>
                        </label>
                    </div>
                    <div class="category-item">
                        <input type="radio" id="category-breakfast" name="category" value="breakfast">
                        <label for="category-breakfast">
                            <i class="fas fa-coffee"></i>
                            <span>早餐</span>
                        </label>
                    </div>
                    <div class="category-item">
                        <input type="radio" id="category-other" name="category" value="other">
                        <label for="category-other">
                            <i class="fas fa-ellipsis-h"></i>
                            <span>其他</span>
                        </label>
                    </div>
                </div>
            </div>
            
            <!-- 难度和时间 -->
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label for="difficulty" class="block text-gray-700 font-medium mb-1">难度</label>
                    <select id="difficulty" class="form-input w-full rounded-lg p-2">
                        <option value="easy">简单</option>
                        <option value="medium">中等</option>
                        <option value="hard">困难</option>
                    </select>
                </div>
                <div>
                    <label for="cookingTime" class="block text-gray-700 font-medium mb-1">烹饪时间（分钟）</label>
                    <input type="number" id="cookingTime" class="form-input w-full rounded-lg p-2" min="1" value="30">
                </div>
            </div>
            
            <!-- 食材 -->
            <div>
                <label class="block text-gray-700 font-medium mb-1">食材</label>
                <div id="ingredientsList" class="space-y-2">
                    <div class="flex items-center">
                        <input type="text" class="form-input flex-1 rounded-lg p-2 mr-2" placeholder="食材名称">
                        <input type="text" class="form-input w-24 rounded-lg p-2" placeholder="用量">
                        <button type="button" class="text-red-500 ml-2" onclick="removeIngredient(this)">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
                <button type="button" class="mt-2 text-primary text-sm" onclick="addIngredient()">
                    <i class="fas fa-plus mr-1"></i>添加食材
                </button>
            </div>
            
            <!-- 步骤 -->
            <div>
                <label class="block text-gray-700 font-medium mb-1">烹饪步骤</label>
                <div id="stepsList" class="space-y-3">
                    <div class="step-item">
                        <div class="step-number">1</div>
                        <textarea class="form-input w-full rounded-lg p-2" rows="2" placeholder="描述这一步的操作"></textarea>
                    </div>
                </div>
                <button type="button" class="mt-2 text-primary text-sm" onclick="addStep()">
                    <i class="fas fa-plus mr-1"></i>添加步骤
                </button>
            </div>
            
            <!-- 小贴士 -->
            <div>
                <label for="tips" class="block text-gray-700 font-medium mb-1">小贴士</label>
                <textarea id="tips" class="form-input w-full rounded-lg p-2" rows="3" placeholder="分享一些烹饪技巧和注意事项"></textarea>
            </div>
        </form>
    </div>

    <!-- 底部导航栏 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white/80 backdrop-blur-md py-2 px-4 flex justify-around items-center shadow-sm">
        <a href="index.html" class="nav-tab flex flex-col items-center text-gray-600">
            <i class="fas fa-home text-xl"></i>
            <span class="text-xs mt-1">首页</span>
        </a>
        <a href="discover.html" class="nav-tab active flex flex-col items-center">
            <i class="fas fa-compass text-xl"></i>
            <span class="text-xs mt-1">发现</span>
        </a>
        <a href="menu.html" class="nav-tab flex flex-col items-center text-gray-600">
            <i class="fas fa-list text-xl"></i>
            <span class="text-xs mt-1">菜单</span>
        </a>
        <a href="profile.html" class="nav-tab flex flex-col items-center text-gray-600">
            <i class="fas fa-user text-xl"></i>
            <span class="text-xs mt-1">我的</span>
        </a>
    </div>

    <script>
        // 图片预览
        function previewImage(input) {
            if (input.files && input.files[0]) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const preview = document.getElementById('imagePreview');
                    preview.innerHTML = `<img src="${e.target.result}" alt="预览图" class="image-preview">`;
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
        
        // 添加食材
        function addIngredient() {
            const ingredientsList = document.getElementById('ingredientsList');
            const newIngredient = document.createElement('div');
            newIngredient.className = 'flex items-center';
            newIngredient.innerHTML = `
                <input type="text" class="form-input flex-1 rounded-lg p-2 mr-2" placeholder="食材名称">
                <input type="text" class="form-input w-24 rounded-lg p-2" placeholder="用量">
                <button type="button" class="text-red-500 ml-2" onclick="removeIngredient(this)">
                    <i class="fas fa-times"></i>
                </button>
            `;
            ingredientsList.appendChild(newIngredient);
        }
        
        // 移除食材
        function removeIngredient(button) {
            const ingredientItem = button.parentElement;
            ingredientItem.remove();
        }
        
        // 添加步骤
        function addStep() {
            const stepsList = document.getElementById('stepsList');
            const stepCount = stepsList.children.length + 1;
            const newStep = document.createElement('div');
            newStep.className = 'step-item';
            newStep.innerHTML = `
                <div class="step-number">${stepCount}</div>
                <textarea class="form-input w-full rounded-lg p-2" rows="2" placeholder="描述这一步的操作"></textarea>
            `;
            stepsList.appendChild(newStep);
        }
        
        // 显示暂存提示
        function showSaveIndicator() {
            const indicator = document.getElementById('saveIndicator');
            indicator.classList.add('show');
            
            setTimeout(() => {
                indicator.classList.remove('show');
            }, 2000);
        }
        
        // 获取表单数据
        function getFormData() {
            // 获取表单数据
            const recipeName = document.getElementById('recipeName').value;
            const difficulty = document.getElementById('difficulty').value;
            const cookingTime = document.getElementById('cookingTime').value;
            const tips = document.getElementById('tips').value;
            
            // 获取分类
            const categoryInputs = document.querySelectorAll('input[name="category"]');
            let category = '';
            categoryInputs.forEach(input => {
                if (input.checked) {
                    category = input.value;
                }
            });
            
            // 获取食材
            const ingredients = [];
            document.querySelectorAll('#ingredientsList .flex').forEach(item => {
                const inputs = item.querySelectorAll('input');
                if (inputs[0].value && inputs[1].value) {
                    ingredients.push({
                        name: inputs[0].value,
                        amount: inputs[1].value
                    });
                }
            });
            
            // 获取步骤
            const steps = [];
            document.querySelectorAll('#stepsList .step-item textarea').forEach(textarea => {
                if (textarea.value) {
                    steps.push(textarea.value);
                }
            });
            
            // 获取图片预览
            const imagePreview = document.querySelector('.image-preview');
            const imageUrl = imagePreview ? imagePreview.src : '';
            
            return {
                recipeName,
                category,
                difficulty,
                cookingTime,
                ingredients,
                steps,
                tips,
                imageUrl
            };
        }
        
        // 填充表单数据
        function fillFormData(data) {
            if (!data) return;
            
            // 填充基本信息
            if (data.recipeName) document.getElementById('recipeName').value = data.recipeName;
            if (data.difficulty) document.getElementById('difficulty').value = data.difficulty;
            if (data.cookingTime) document.getElementById('cookingTime').value = data.cookingTime;
            if (data.tips) document.getElementById('tips').value = data.tips;
            
            // 填充分类
            if (data.category) {
                const categoryInput = document.getElementById(`category-${data.category}`);
                if (categoryInput) categoryInput.checked = true;
            }
            
            // 填充图片
            if (data.imageUrl) {
                const preview = document.getElementById('imagePreview');
                preview.innerHTML = `<img src="${data.imageUrl}" alt="预览图" class="image-preview">`;
            }
            
            // 填充食材
            if (data.ingredients && data.ingredients.length > 0) {
                const ingredientsList = document.getElementById('ingredientsList');
                ingredientsList.innerHTML = '';
                
                data.ingredients.forEach(ingredient => {
                    const newIngredient = document.createElement('div');
                    newIngredient.className = 'flex items-center';
                    newIngredient.innerHTML = `
                        <input type="text" class="form-input flex-1 rounded-lg p-2 mr-2" placeholder="食材名称" value="${ingredient.name}">
                        <input type="text" class="form-input w-24 rounded-lg p-2" placeholder="用量" value="${ingredient.amount}">
                        <button type="button" class="text-red-500 ml-2" onclick="removeIngredient(this)">
                            <i class="fas fa-times"></i>
                        </button>
                    `;
                    ingredientsList.appendChild(newIngredient);
                });
            }
            
            // 填充步骤
            if (data.steps && data.steps.length > 0) {
                const stepsList = document.getElementById('stepsList');
                stepsList.innerHTML = '';
                
                data.steps.forEach((step, index) => {
                    const newStep = document.createElement('div');
                    newStep.className = 'step-item';
                    newStep.innerHTML = `
                        <div class="step-number">${index + 1}</div>
                        <textarea class="form-input w-full rounded-lg p-2" rows="2" placeholder="描述这一步的操作">${step}</textarea>
                    `;
                    stepsList.appendChild(newStep);
                });
            }
        }
        
        // 暂存菜谱
        function saveDraft() {
            const formData = getFormData();
            
            // 保存到本地存储
            localStorage.setItem('recipeDraft', JSON.stringify(formData));
            
            // 显示暂存提示
            showSaveIndicator();
        }
        
        // 加载暂存的菜谱
        function loadDraft() {
            const draft = localStorage.getItem('recipeDraft');
            if (draft) {
                const formData = JSON.parse(draft);
                fillFormData(formData);
            }
        }
        
        // 提交菜谱
        document.getElementById('submitRecipe').addEventListener('click', function() {
            // 获取表单数据
            const formData = getFormData();
            
            // 验证表单
            if (!formData.recipeName) {
                alert('请输入菜谱名称');
                return;
            }
            
            if (!formData.category) {
                alert('请选择菜谱分类');
                return;
            }
            
            if (formData.ingredients.length === 0) {
                alert('请添加至少一种食材');
                return;
            }
            
            if (formData.steps.length === 0) {
                alert('请添加至少一个烹饪步骤');
                return;
            }
            
            // 创建菜谱对象
            const recipe = {
                id: 'recipe_' + Date.now(),
                name: formData.recipeName,
                category: formData.category,
                difficulty: formData.difficulty,
                cookingTime: formData.cookingTime,
                ingredients: formData.ingredients,
                steps: formData.steps,
                tips: formData.tips,
                imageUrl: formData.imageUrl,
                likes: 0,
                comments: 0,
                createdAt: new Date().toISOString()
            };
            
            // 保存到本地存储
            saveRecipe(recipe);
            
            // 清除暂存
            localStorage.removeItem('recipeDraft');
            
            // 跳转到发现页
            window.location.href = 'discover.html';
        });
        
        // 保存菜谱到本地存储
        function saveRecipe(recipe) {
            // 获取现有菜谱
            let recipes = JSON.parse(localStorage.getItem('recipes') || '[]');
            
            // 添加新菜谱
            recipes.unshift(recipe);
            
            // 保存回本地存储
            localStorage.setItem('recipes', JSON.stringify(recipes));
            
            // 显示成功提示
            alert('菜谱发布成功！');
        }
        
        // 页面加载时加载暂存的菜谱
        document.addEventListener('DOMContentLoaded', function() {
            // 加载暂存的菜谱
            loadDraft();
            
            // 绑定暂存按钮事件
            document.getElementById('saveDraft').addEventListener('click', saveDraft);
            
            // 自动暂存（每30秒）
            setInterval(saveDraft, 30000);
        });
    </script>
</body>
</html> 